<script setup lang="ts">
import { computed } from 'vue';
import { ElButton } from 'element-plus';
import { AButtonProps, aButtonTypes } from './button';
import type { AButtonType } from './button';

defineOptions({
  name: 'AButton'
});

const props = defineProps({
  block: Boolean,
  ...AButtonProps
});

const buttonType = computed<AButtonType>(() => {
  if (props.type && aButtonTypes.includes(props.type)) {
    // console.log(props.type);
    return props.type as AButtonType;
  } else if (props.color) {
    return 'primary';
  }
  return 'default';
});
</script>
<template>
  <ElButton v-bind="{ ...$attrs, ...props }" :type="buttonType" :class="{ 'w-full': block }">
    <template v-for="(_, key) in $slots" #[key]>
      <slot :name="key" />
    </template>
  </ElButton>
</template>

<style lang="scss" scoped></style>
